<template>
  <div class="co_wallet_extension">
    <div
      class="setcion-header setcion-headers"
      @click="showradio"
    >
      {{xuanzhong}}
      <img :src=" isStatus ? 'https://o6wndwjxn.qnssl.com/%E7%AE%AD%E5%A4%B4-%E4%B8%8A@2x.png' : 'https://o6wndwjxn.qnssl.com/%E7%AE%AD%E5%A4%B4-%E4%B8%8B@2x.png'" style="width:10px">
    </div>
    <div
      v-if="isStatus"
      class="marsk"
    ></div>
    <transition name="cssfaes" >
      <section v-if="isStatus" class="vasbot">
        <div
          v-for="(item) in sbtData"
          :key='item.name'
          @click="itemclick(item.type,item.name)"
          class="setcion-header"
        >
          {{item.name}}
           <img v-if="item.name === xuanzhong" src="https://o6wndwjxn.qnssl.com/%E9%80%89%E4%B8%AD@2x.png" class="actives">
        </div>
      </section>
    </transition>
    <div
      class="co_cwe_box"
      v-show="setData.length > 0"
      v-for="(item,index) in setData"
      :key='index'
    >
      <section class="class-name">
        <aside v-if="xuanzhong !== '分销收益'" class="nink-name"> {{item.nick_name ? item.nick_name : '&nbsp;'}} </aside>
        <aside :class=" xuanzhong !== '分销收益' || item.nick_name == null ? 'ninck-class' : 'ninck-class-s'">{{item.class_name}}{{item.chapter_name}}</aside>
      </section>
      <section
        class="minwen"
        style="background-color:#F39800"
        v-if="item.shenhe === '审核中'"
      >{{item.shenhe}}
      </section>
      <section
        class="minwen"
        style="background-color:#20b920"
        v-if="item.shenhe === '审核通过'"
      >{{item.shenhe}}
      </section>
      <section
        class="minwen"
        style="background-color:#999"
        v-if="item.shenhe === '已领取'"
      >{{item.shenhe}}
      </section>
      <section
        class="minwen"
        style="background-color:#FF3B30"
        v-if="item.shenhe === '审核失败'"
      >{{item.shenhe}}
      </section>
      <span
        class="co_cwe_s"
        v-if="item.up_money"
      >+{{item.up_money}}</span>
      <span
        class="co_cwe_s"
        v-if="item.recommender_money"
      >¥{{item.recommender_money}}</span>
      <span
        class="co_cwe_s"
        v-if="item.commission_money"
      >¥{{item.commission_money}}</span>
      <div class="co_cwe_r">
        <div v-if="state === undefined">
          <div v-if="item.up_money">+¥{{item.up_money}}</div>
          <div v-else>+¥{{item.commission_money}}</div>
          <!-- <div class="title-title">{{item.title}}</div> -->
        </div>
      </div>
      <section class="creat-time">
        {{item.create_time}}
      </section>
    </div>
    <div
      class="co_kong"
      v-if="setData.length == 0"
    >
      <kong
        :type='co_kong'
        img='https://o6wndwjxn.qnssl.com/WechatIMG3.png'
      ></kong>
    </div>
  </div>
</template>

<script>
import kong from '@/components/public/kong.vue'
import {
  distribution,
  forward,
  examineIng
} from '@/api/center'
import {
  mapState
} from 'vuex'
export default {
  components: {
    kong
  },
  computed: {
    ...mapState({
      app_id: state => state.app_id,
      user_id: state => state.member_id
    })
  },
  data () {
    return {
      xuanzhong: '全部',
      isStatus: false,
      sbtData: [
        {
          name: '全部',
          type: 'all'
        },
        {
          name: '分销收益',
          type: 'commission'
        },
        {
          name: '讲师推广收益',
          type: 'recommender'
        }, {
          name: '学员推广收益',
          type: 'up'
        }
      ],
      state: '',
      setData: [],
      co_kong: '任何数据',
      page: 1,
      pageshow: 50
    }
  },
  mounted () {
    if (this.$route.query.state) {
      this.$nextTick(() => {
        document.title = '收益明细'
      })
    }
  },
  created () {
    this.getYilingqu()
  },
  methods: {
    itemclick (type, name) {
      this.getYilingqu(type)
      this.xuanzhong = name
    },
    showradio () {
      this.isStatus = !this.isStatus
    },
    getYilingqu (type, e = 1) {
      let requery = {
        app_id: this.app_id,
        member_id: this.user_id,
        page: this.pageyi,
        type: type || 'all'
      }
      forward(requery).then(res => {
        this.isStatus = false
        // console.log('已领取',res)
        this.$store.commit('updateLoadingStatus', { isLoading: false })
        let { code, data, msg } = res.data
        if (code == 200) {
          this.yi_kong = false
          this.setData = data
        } else {
          this.setData = []
          if (!this.tabstatus_yi) {
            if (e == 1) {
              this.tabstatus_yi = true
              this.co_with_tips = true
              this.tipstext = '没有更多了...'
              return
            }
          }
          this.yi_kong = true
          // console.log('就是没有')
        }
      })
    }
  }
}
</script>

 <style scoped>
.nink-name{
  line-height: calc(100vw * 60 / 750);
   margin-right: calc(100vw * 27 / 750);
}
.actives{
  width:  calc(100vw * 38 / 750);
  height: calc(100vw * 28 / 750);
  position: absolute;
  right: calc(100vw * 30 / 750);
  top: 50%;
  transform: translate(0,-50%);
}
.co_wallet_extension{
  background: #fff;
  padding-top: calc(100vw * 100 / 750);
}
.vasbot{
  position: fixed;
  z-index: 200;
  top: calc(100vw * 100 / 750);
  background-color: #fff;
  width: 100%;
}
.ninck-class-s {
  line-height: calc(100vw * 110 / 750);
}
.minwen {
  font-family: PingFangSC-Regular;
  font-size: calc(100vw * 22 / 750);
  width: 50px;
  height: 15px;
  font-family: PingFangSC-Medium;
  font-size: 10px;
  color: #ffffff;
  text-align: center;
  line-height: 15px;
  background-color: #ff3b30;
  border-radius: 20px;
  margin-top: 5px;
}
.creat-time {
  font-family: PingFangSC-Medium;
  font-size: calc(100vw * 28 / 750);
  color: #999999;
  position: absolute;
  right: calc(100vw * 30 / 750);
  bottom: calc(100vw * 8 / 750);
}
.class-name {
  font-family: PingFangSC-Medium;
  font-size: calc(100vw * 30 / 750);
  color: #333333;
  text-overflow: ellipsis;
  display: -webkit-box;
  /* -webkit-box-orient: vertical; */
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.ninck-class {
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #999999;
  letter-spacing: 0.58px;
  text-align: left;
  font-size: 15px;
  line-height: calc(100vw * 60 / 750);
  text-overflow: ellipsis;
  display: -webkit-box;
  /* -webkit-box-orient: vertical; */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.ext-img {
  width: calc(100vw * 200 / 750);
  height: calc(100vw * 110 / 750);
  border-radius: calc(100vw * 10 / 750);
  overflow: hidden;
  flex: 0 0 calc(100vw * 200 / 750);
  margin-right: calc(100vw * 40 / 750);
}
.ext-img > img {
  width: 100%;
  height: 100%;
}
.co_cwe_box {
  position: relative;
  width: 100%;
  height: calc(100vw * 120 / 750);
  display: flex;
  padding: 0 calc(100vw * 40 / 750);
  box-sizing: border-box;
  margin-top: calc(100vw * 10 / 750);
  padding-bottom: calc(100vw * 10 / 750);
}
.co_cwe_l {
  flex: 5;
  position: relative;
}
.co_cwe_l > div:nth-child(1) {
  font-size: 15px;
  color: #1a1a1a;
  font-weight: bold;
  margin-top: 10px;
}
.co_cwe_l > div:nth-child(1) p {
  text-overflow: ellipsis;
  display: -webkit-box;
  /* -webkit-box-orient: vertical; */
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.co_cwe_l > div:nth-child(2) {
  position: absolute;
  left: 0;
  bottom: 10px;
  font-size: 14px;
  color: #9e9e9e;
}
.co_cwe_r {
  font-family: PingFangSC-Regular;
  font-size: calc(100vw * 28 / 750);
  color: #DA4131;
  letter-spacing: 1px;
  position: absolute;
  right: 20px;
}
.co_cwe_s {
  line-height: calc(100vw * 60 / 750);
  font-family: PingFangSC-Regular;
  font-size: calc(100vw * 34 / 750);
  color: #DA4131;
  letter-spacing: 1px;
  position: absolute;
  top: 5px;
  right: 15px;
}
.title-title {
  font-family: PingFangSC-Regular;
  font-size: calc(100vw * 22 / 750);
  color: #999999;
}

.setcion-header {
  text-align: left;
  width: 100%;
  height: calc(100vw * 100 / 750);
  line-height: calc(100vw * 100 / 750);
  color: #333;
  font-size: 17px;
  background-color: #fff;
  z-index: 200;
  position: relative;
  font-family: PingFangSC-Regular;
  color: #333333;
  padding-left: 15px;
  box-sizing: border-box;
}
.setcion-headers{
  text-align: center;
  position: fixed;
  top: 0;
  width: 100%;
}
.cssfaes-enter-active,
.cssfaes-leave-active {
  transition: all 0.3s;
  height: 200px;
  overflow: hidden;
}
.cssfaes-enter, .cssfaes-leave-to /* .fade-leave-active below version 2.1.8 */ {
  height: 1px;
}
.marsk {
  z-index: 10;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
}
</style>
